<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>还款计划表修改复核</title>

    <!-- jQuery -->
    <script src="/vendor/jquery/jquery.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="/vendor/bootstrap/js/bootstrap.min.js"></script>

    <!-- Metis Menu Plugin JavaScript -->
    <script src="/vendor/metisMenu/metisMenu.min.js"></script>

    <!-- Custom Theme JavaScript -->
    <script src="/dist/js/sb-admin-2.js"></script>

    <!-- Datepicker JavaScript -->
    <script th:src="@{/vendor/datepicker/bootstrap-datepicker.js}"></script>

    <!-- BootstrapTables JavaScript -->
    <script src="/vendor/bootstrap-table/bootstrap-table.js"></script>
    <script src="/vendor/bootstrap-table/bootstrap-table-zh-CN.js"></script>

    <!-- Bootstrap Core CSS -->
    <link href="/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="/vendor/metisMenu/metisMenu.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="/dist/css/sb-admin-2.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- Datepicker CSS -->
    <link th:href="@{/vendor/datepicker/datepicker3.css}" rel="stylesheet" type="text/css">

    <!-- BootstrapTables CSS -->
    <link href="/vendor/bootstrap-table/css/bootstrap-table.css" rel="stylesheet">

    <script>
        $(function () {
            //当其采取后台分页的时候，在这里把所需要的参数传给后台
            function queryParams(params) { // 配置参数
                var temp = {
                    refno : $('#refno').val()
                };
                return temp;
            }

            $("#tb_repaymentSchedule").bootstrapTable({
                method : "post",// 请求方式（*）
                url: "/getRepaymentScheduleReviewInfo",// 请求后台的URL（*）
                queryParams : queryParams,// 传递参数（*)
                uniqueId : "instno",// 唯一标识
                sidePagination : 'client',// 分页方式：client客户端分页，server服务端分页（*）
                sortName : "instno",// 排序字段
                sortOrder : "asc",// 排序方式
                pageList : [ 5, 10, 15, 20, 25, 30 ],// 可供选择的每页的行数（*）
                pageNumber : 1,// 初始化加载第一页，默认第一页
                pagination : true,// 是否显示分页（*）
                pageSize : 12,// 每页的记录行数（*）
                showColumns : true, // 是否显示所有的列
                toolbar : "#toolbar",// 工具按钮用哪个容器
                clickToSelect : true,// 是否启用点击选中行
                cache : false,// 是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                striped : false,// 是否显示行间隔色
                showRefresh : true,// 是否显示刷新按钮
                showToggle : true,// 是否显示详细视图和列表视图的切换按钮
                cardView : false,// 是否显示详细视图
                detailView : false,// 是否显示父子表
                paginationLoop : false,// 是否允许循环分页
                paginationPreText : "上一页",// 指定上一页按钮文字，不配置默认<
                paginationNextText : "下一页",
                columns : [{
                    field: 'instno',
                    title: '期数'
                }, {
                    field: 'strdate',
                    title: '日期',
                    formatter:function(value,row,index){
                        if (value != null) {
                            return "<input name='strdate' id='strdate' value='"+value+"'>"
                        }
                    }
                }, {
                    field : 'daycount',
                    title : '计息天数',
                    formatter:function(value,row,index){
                        var startdate = new Date(row.strdate.replace(/^(\d{4})(\d{2})(\d{2})$/, "$1-$2-$3"));
                        var dwndate = new Date($('#dwndate').val().replace(/^(\d{4})(\d{2})(\d{2})$/, "$1-$2-$3"));
                        var duedate = new Date(row.duedate.replace(/^(\d{4})(\d{2})(\d{2})$/, "$1-$2-$3"));
                        if (row.instno == "1"){
                            return (startdate-dwndate)/86400000;
                        }else {
                            var haomiaocount = duedate - startdate;
                            var daycount = haomiaocount / 86400000;
                            return daycount;
                        }
                    }
                }, {
                    field : 'instamt',
                    title : '每期还款额',
                    formatter:function(value,row,index){
                        return "<input name='instamt' id='instamt' value='"+value+"'>"
                    }
                }, {
                    field : 'begprinamt',
                    title : '还款前本金',
                    formatter:function(value,row,index){
                        return ((row.lnosamt+row.prnamt).toFixed(2));
                    }
                }, {
                    field : 'intamt',
                    title : '应还利息',
                    formatter:function(value,row,index){
                        return value;
                    }
                }, {
                    field : 'prnamt',
                    title : '应还本金',
                    formatter:function(value,row,index){
                        return "<input name='prnamt' id='prnamt' value='"+value+"'>";
                    }
                },{
                    field : 'lnosamt',
                    title : '还款后剩余本金',
                    formatter:function(value,row,index){
                        return value;
                    }
                }],

                onClickRow : function(row) {

                }
            });

            var drawamt = $('#drawamt').val();
            var json={
                refno : $("#refno").val()
            };
            $.ajax({
                type: "POST",
                url: "/getRepaymentScheduleInfo",
                contentType: "application/json",
                dataType : "json",
                data: JSON.stringify(json),
                async: false,
                success: function(result){
                    var intamtcount = 0;
                    var prnamtcount = 0;
                    var hanchrg = parseFloat($('#hanchrg').val()).toFixed(2);
                    for(var i=0;i<result.length;i++){
                        intamtcount += result[i].intamt;
                        prnamtcount += result[i].prnamt;
                    }
                    //总利息
                    $('#amtcount2').val(intamtcount.toFixed(2));
                    //总利息
                    $('#amtcount3').val(prnamtcount.toFixed(2));
                    //总还款额
                    $('#amtcount1').val(parseFloat(intamtcount+prnamtcount+hanchrg).toFixed(2));
                },
                error: function (result) {
                    alert(result);
                }
            });

            $('#confirm').click(function () {
                $('#hanchrg').val(parseFloat($('#separationAllowance').val()).toFixed(2));
                var intamtcount = $('#amtcount2').val();
                var prnamtcount = $('#amtcount3').val();
                var hanchrg = $('#hanchrg').val();
                $('#amtcount1').val((parseFloat(intamtcount)+parseFloat(prnamtcount)+parseFloat(hanchrg)).toFixed(2));
            })

            $('#strdate').datepicker({
                format: 'yyyymmdd',
                weekStart: 1,
                autoclose: true,
                todayBtn: 'linked',
                language: 'zh-CN'
            }).on('changeDate', function (ev) {

            });

            $('#fpaydat').datepicker({
                format: 'yyyymmdd',
                weekStart: 1,
                autoclose: true,
                todayBtn: 'linked',
                language: 'zh-CN'
            }).on('changeDate', function (ev) {

            });
        })

        $(function () {
            var url = window.location.href;//获取当前浏览器的url
            index = url.indexOf("flag");//判断当前url是否有flag，如果有，说明是从A页面跳转而来的，就执行下面的程序

            if(index !=-1) {//由A页面跳转而来
                $('#strdateDiv').show();
                $('#lnosamtDiv').show();
            }
        })

    </script>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->


</head>

<body>

<div id="wrapper">
    <div id="page-wrapper"  style="margin-left:0">
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">还款计划表修改复核</h1>
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <form id="formTable" th:action="@{/repaymentScheModify}"  th:object="${repaymentScheModify_entity}" method="post" >
            <div id="divTable" class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <ul id="myTabOne" class="nav nav-tabs">
                            <li class="active"><a href="#home" data-toggle="tab">还款查询修改复核</a></li>
                            <li><a href="javascript:void(0)" id="a_count">审批通过</a></li>
                            <li><a href="javascript:void(0)" id="a_start">审批不通过</a></li>
                        </ul>
                    </h4>
                </div>
                <div id="collapse20" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <div class="row">
                            <label>申请人资料</label>
                        </div>
                        <div class="row">
                            <input class="form-control" type="hidden" id="refno" name="refno" th:field="*{refno}">
                            <!--<input class="form-control" type="hidden" name="loanref" th:field="*{loanref}">-->
                            <!--<input class="form-control" type="hidden" name="lineno" th:field="*{lineno}">-->
                        </div>
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="col-lg-4">
                                    <div class="col-lg-4">
                                        <label>贷款放款日：</label>
                                    </div>
                                    <div class="col-lg-8">
                                        <input class="form-control" id="dwndate" name="dwndate" th:field="*{dwndate}" disabled>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="col-lg-4">
                                        <label>期数：</label>
                                    </div>
                                    <div class="col-lg-8">
                                        <input class="form-control" id="instno" name="instno" th:field="*{instno}" disabled>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="col-lg-4">
                                        <label>首次还款日：</label>
                                    </div>
                                    <div class="col-lg-8">
                                        <input class="form-control" id="fpaydat" name="fpaydat" th:field="*{fpaydat}" disabled>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--<div class="row" style="display:none;">-->
                        <!--<div class="col-lg-4">-->
                        <!--<div class="col-lg-4">-->
                        <!--<label>到期日：</label>-->
                        <!--</div>-->
                        <!--<div class="col-lg-8">-->
                        <!--<input class="form-control" id="duedate" name="duedate" th:field="*{duedate}" disabled>-->
                        <!--</div>-->
                        <!--</div>-->
                        <!--</div>-->
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="col-lg-4">
                                    <div class="col-lg-4">
                                        <label>本金：</label>
                                    </div>
                                    <div class="col-lg-8">
                                        <input class="form-control" id="lnamt" name="lnamt" th:field="*{lnamt}" disabled>
                                    </div>
                                </div>
                                <div class="col-lg-4">
                                    <div class="col-lg-4">
                                        <label>年利率（%）：</label>
                                    </div>
                                    <div class="col-lg-8">
                                        <input class="form-control" id="intrate" name="intrate" th:field="*{intrate}" disabled>
                                    </div>
                                </div>
                                <div class="col-lg-4" id="strdateDiv" style="display:none;">
                                    <div class="col-lg-4">
                                        <label>下次还款日：</label>
                                    </div>
                                    <div class="col-lg-8">
                                        <input class="form-control" id="strdate" name="strdate" th:field="*{strdate}" >
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row" id="lnosamtDiv" style="display:none;">
                            <div class="col-lg-12">
                                <div class="col-lg-4">
                                    <div class="col-lg-4">
                                        <label>贷款余额:</label>
                                    </div>
                                    <div class="col-lg-8">
                                        <input class="form-control" th:field="*{lnosamt}" name="lnosamt" maxlength="12" id="lnosamt" readonly>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <div id="Table" class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse22">还款计划表</a>
                </h4>
            </div>
            <div id="collapse22" class="panel-collapse collapse in">
                <div class="panel-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <div id="toolbar" class="btn-group">

                            </div>
                            <table id="tb_repaymentSchedule"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="separationAllowanceDiv" class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <ul id="enteringSeparationAllowance" class="nav nav-tabs">
                        <li class="active"><a href="#home" data-toggle="tab">录入补偿金</a></li>
                    </ul>
                </h4>
            </div>
            <div id="separationAllowanceInfo" class="panel-collapse collapse in">
                <div class="panel-body">
                    <div class="row">
                        <div class="col-lg-1">
                            <label>补偿金</label>
                        </div>
                        <div class="col-lg-2">
                            <input class="form-control" id="separationAllowance">
                        </div>
                        <div class="col-lg-2">
                            <button id="confirm" type="button" class="btn btn-primary">确定</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <form id="formTableTwo" th:action="@{/repaymentScheModify}"  th:object="${repaymentScheModify_entity}" method="post" >
            <div id="TableTwo" class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <ul id="myTabTwo" class="nav nav-tabs">
                            <li class="active"><a href="#home" data-toggle="tab">合计</a></li>
                        </ul>
                    </h4>
                </div>
                <div id="collapse21" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-lg-3">
                                <label>总还款额</label>
                            </div>
                            <div class="col-lg-3">
                                <label>总还利息</label>
                            </div>
                            <div class="col-lg-3">
                                <label>总还本金</label>
                            </div>
                            <div class="col-lg-3">
                                <label>补偿金</label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-2">
                                <input class="form-control" id="amtcount1" disabled>
                            </div>
                            <div class="col-lg-1">
                                <label>=</label>
                            </div>
                            <div class="col-lg-2">
                                <input class="form-control" id="amtcount2" disabled>
                            </div>
                            <div class="col-lg-1">
                                <label>+</label>
                            </div>
                            <div class="col-lg-2">
                                <input class="form-control" id="amtcount3" disabled>
                            </div>
                            <div class="col-lg-1">
                                <label>+</label>
                            </div>
                            <div class="col-lg-2">
                                <input class="form-control" id="hanchrg" th:field="*{hanchrg}" disabled>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>



</body>

</html>
